// pages/custom-steps/custom-steps.js
 
Component({
  properties: {
    steps: {
      type: Array,
      value: [],
    },
    index: {
      type: Number,
      value: 0,
    },
  },
  data: {},
  pageLifetimes: {
    show() {},
    hide() {},
  },
  methods: {
    // 上一步
    prevStep() {
      this.setData({
        index: this.data.index - 1,
      });
    },
    // 下一步
    nextStep() {
      this.setData({
        index: this.data.index + 1,
      });
    },
    handleClickStep(e) {
      // 点击将当前步骤设置为激活状态,当前步骤之前为已完成状态，之后为未激活状态
      this.setData({
        steps: this.data.steps.map((item, i) => {
          const { id } = e.currentTarget.dataset;
          if (i === id) {
            item.status = 'active';
          } else if (i < id) {
            item.status = 'completed';
          } else {
            item.status = 'inactive';
          }
          return item;
        }),
      });
    },
  },
  lifetimes: {
    attached() {},
    detached() {},
  },
});